#@weiXinLayout("房间预订")

#define weiXinMain()
#@navBar("房间预订","")
<form id="submitForm">
#set(unit = room.unitId())
    <div class="weui-cells__title">客栈名称</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            #(unit.name??'')
        </div>
    </div>
</div>
<div class="weui-cells__title">房间名称</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            #(room.name??'')
        </div>
    </div>
</div>

<div class="weui-cells__title">所在地址</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            #(unit.address??'')
        </div>
    </div>
</div>

<div class="weui-cells__title">联系人</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" name="roomOrder.name" id="name" type="text" placeholder="请输入联系人...">
        </div>
    </div>
</div>
<div class="weui-cells__title">联系电话</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" name="roomOrder.mobile" id="mobile" type="text" placeholder="请输入联系电话...">
        </div>
    </div>
</div>
<div class="weui-cells__title">证件类型</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" id="cardType" type="text" placeholder="请选择证件类型...">
        </div>
    </div>
</div>
<div class="weui-cells__title">证件号码</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" name="roomOrder.card_no" id="cardNo" type="text" placeholder="请输入证件号码...">
        </div>
    </div>
</div>
<div class="weui-cells__title">入住时间</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" name="roomOrder.start_time"   id="start_time" type="text" placeholder="请选择入住时间...">
        </div>
    </div>
</div>
<div class="weui-cells__title">离开时间</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" name="roomOrder.end_time"  id="end_time" type="text" placeholder="请选择离开时间...">
        </div>
    </div>
</div>
<div class="weui-cells__title">房间价格</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            ￥<span id="price">#(room.price??'')</span>/晚
        </div>
    </div>
</div>
<div class="weui-cells__title">预计花费</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            ￥<span id="totalPrice">0</span><span id="totalDays"></span>
            <input type="hidden" id="totalPriceHidden" name="total_price">
        </div>
    </div>
</div>
<div class="weui-cells__title">留言信息</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <textarea class="weui-textarea" name="roomOrder.remarker" id="remarker" placeholder="假如你有什么特殊要求，请提前告诉我们，例如，我需要24小时热水" rows="3"></textarea>
        </div>
    </div>
</div>
<div class="button-padding">
    <a href="javascript:;" id="submitBtn" class="weui-btn weui-btn_primary">保存信息</a>
    <input type="hidden" value="#(room.id??'')" name="roomOrder.obj_id">
    <input type="hidden" id="card_type_hidden" name="roomOrder.card_type">
    #(token??'')
</div>
</form>
#end

#define weiXinCss()
#end
#define weiXinJs()
<script>
    $(document).ready(function(){
        $("#cardType").select({
            title: "请选择您的证件类型",
            items: [
                {
                    title: "身份证",
                    value: "1",
                },
                {
                    title: "护照",
                    value: "2",
                },
                {
                    title: "台胞证",
                    value: "3",
                }
            ],
            onChange:function(){
                var values = $("#cardType").attr("data-values");
                $("#card_type_hidden").val(values);
            }
        });


        var d1 = new Date();
        var starTime = d1.format('yyyy-MM-dd');
        $("#start_time").calendar({
            dateFormat:'yyyy-mm-dd',
            minDate:starTime
        });

        $("#end_time").calendar({
            dateFormat:'yyyy-mm-dd',
            minDate:$("#start_time").val(),
            onClose:function(){
                var startTime = $("#start_time").val();
                var endTime = $("#end_time").val();
                if(startTime==""){
                    $.alert("请选择入住时间");
                    return;
                }
                if(endTime==""){
                    $.alert("请选择离店时间");
                    return;
                }
                var days = datedifference(startTime,endTime);
                if(days==-1){
                    $.alert("离店时间必须大于入住时间之后");
                    $("#end_time").val("");
                    return;
                }
                if(days<1){
                    $.alert("入住时间必须大于1天");
                    $("#end_time").val("");
                }
                var price = $("#price").html();
                var totalPrice =parseFloat(price)*days;
                $("#totalPrice").html(totalPrice);
                $("#totalPriceHidden").val(totalPrice);
            }
        });

        function datedifference(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式
            var dateSpan,tempDate,iDays;
            sDate1 = Date.parse(sDate1);
            sDate2 = Date.parse(sDate2);
            dateSpan = sDate2 - sDate1;
            if(dateSpan<0){
                return -1;
            }
            dateSpan = Math.abs(dateSpan);
            iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
            return iDays
        };

        $("#submitBtn").click(function(){
            var config ={
                "url":"#(contextPath)/weixin/room/ajaxDoRoomOrder",
                "data":$("#submitForm").serialize(),
                "successCallBack":function(resp){
                    if(resp.result){
                        $.alert("请确认您的客栈的订单",function(){
                            window.location.href="#(contextPath)/weixin/room/roomOrderPreview?id="+resp.data;
                        });
                    }else{
                        $.alert(resp.data);
                    }
                }
            }

            $.confirm({
                "title":"系统提示",
                "text":"确定要进行当前操作吗?",
                "onOK":function () {
                    var ajax = new AjaxUtils(config);
                    ajax.executeRequest();
                }
            });
        })
    })
</script>
#end